<template>
	<div id="allDateSynclog">
		<div class="bottomLine">
			<span>同步信息列表</span>
			<at-button @click="toPath" class="toPathlog" type="primary"><span class="saas-icon-clock"></span>变更历史信息</at-button>
			<at-button type="primary" @click='clear' class="clearLog" :disabled="add.length == 0&& update.length == 0 && deletes.length == 0?true:false"><span class="saas-icon-icon-close"></span>清空同步信息</at-button>
		</div>
		<div class="inner">
			<span class="tittleTop">
				新增用户信息
				<span :class="{'doubleNum':add.length.toString().length === 2, 'singleNum': add.length.toString().length === 1, 'more': add.length>99, 'common': true}">
	                <span class="infoCount" v-if="add.length<=99"> {{add.length}}</span>
	                <span class="infoCount" v-else>99+</span>
	            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="add" @sort-change="sortChange" max-height="251" @filter-change="addFilter">
					<at-table-column prop="zr_time" label="更新时间" width="180" column-key="add" sortable="custom">
					</at-table-column>
					<at-table-column prop="person_id" label="用户ID" width="180">
					</at-table-column>
					<at-table-column prop="person_name" label="用户名">
					</at-table-column>
					<at-table-column prop="user_name" label="账号">
					</at-table-column>
					<at-table-column prop="user_group_name" label="所属用户组" width="180"
					 show-overflow-tooltip>
					</at-table-column>
					<at-table-column prop="agency_name" label="所属机构">
					</at-table-column>
					<at-table-column prop="email" label="邮箱">
					</at-table-column>
					<at-table-column prop="mobile_phone" label="手机号码">
					</at-table-column>
				</at-table>
			</div>
		</div>
		<div class="inner">
			<span class="tittleTop">
				修改用户信息
				<span :class="{'doubleNum':update.length.toString().length === 2, 'singleNum': update.length.toString().length === 1, 'more': update.length>99, 'common': true}">
                <span class="infoCount" v-if="update.length<=99"> {{update.length}}</span>
                <span class="infoCount" v-else>99+</span>
            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="update" @sort-change="sortChange" max-height="251" @filter-change="upFilter">
				<at-table-column prop="zr_time" label="更新时间" width="180" column-key="update" sortable="custom">
				</at-table-column>
				<at-table-column prop="person_id" label="用户ID" width="180">
				</at-table-column>
				<at-table-column prop="person_name" label="用户名">
				</at-table-column>
				<at-table-column prop="user_name" label="账号">
				</at-table-column>
				<at-table-column prop="user_group_name" label="所属用户组" width="180"
				 show-overflow-tooltip>
				</at-table-column>
				<at-table-column prop="agency_name" label="所属机构">
				</at-table-column>
				<at-table-column prop="email" label="邮箱">
				</at-table-column>
				<at-table-column prop="mobile_phone" label="电话号码">
				</at-table-column>
			</at-table>
			</div>
		</div>
		<div class="inner">
			<span class="tittleTop">
				删除用户信息
				<span :class="{'doubleNum':deletes.length.toString().length === 2, 'singleNum': deletes.length.toString().length === 1, 'more': deletes.length>99, 'common': true}">
                <span class="infoCount" v-if="deletes.length<=99"> {{deletes.length}}</span>
                <span class="infoCount" v-else>99+</span>
            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="deletes" @sort-change="sortChange" max-height="251" @filter-change="delFilter">
				<at-table-column prop="zr_time" label="更新时间" width="180" column-key="delete" sortable="custom">
				</at-table-column>
				<at-table-column prop="person_id" label="用户ID" width="180">
				</at-table-column>
				<at-table-column prop="person_name" label="用户名">
				</at-table-column>
				<at-table-column prop="user_name" label="账号">
				</at-table-column>
				<at-table-column prop="user_group_name" label="所属用户组" width="180"
				 show-overflow-tooltip>
				</at-table-column>
				<at-table-column prop="agency_name" label="所属机构">
				</at-table-column>
				<at-table-column prop="email" label="邮箱">
				</at-table-column>
				<at-table-column prop="mobile_phone" label="电话号码">
				</at-table-column>
			</at-table>
			</div>
		</div>
		<at-dialog title='提示' :visible.sync='suredeleteone' size='tiny'>
      <div class="dialog__body__content">
        <i class='saas-icon-cir-i'></i>确认清空
      </div>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='deletemsgone'>确 定</at-button>
        <at-button @click.stop='cancel'>取 消</at-button>
      </div>
    </at-dialog>
	</div>
</template>
<style>
#allDateSynclog {
  padding-bottom: 10px;
} 
#allDateSynclog .dialog__body__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#allDateSynclog .saas-icon-cir-i {
  font-size: 20px;
  color: red;
  vertical-align: -5px;
  display: inline-block;
  margin-left: 0px;
  padding-right: 5px;
}
	#allDateSynclog .saas-icon-icon-close{
		font-size: 20px;
    	vertical-align: -5px;
    	margin-right: 5px
	}
	#allDateSynclog .saas-icon-clock
	{
		font-size: 20px;
    	vertical-align: -5px;
    	margin-right: 5px
	}
	/* 用户用户组的表格样式 */
	#allDateSynclog .tableBorder{
		/* max-height: 243px;
  	overflow: auto; */
		border: 1px solid #EEE;
		padding: 0 20px 20px;
	}
	#allDateSynclog .toPathlog {
		margin-top: 10px;
		display: inline-block;
		height: 30px;
		width: 110px;
		margin-right: 20px
	}

	#allDateSynclog .clearLog {
		margin-top: 10px;
		display: inline-block;
		margin-right: 10px;
		height: 30px;
		width: 110px;

	}

	#allDateSynclog .tittleTop {
		display: inline-block;
		margin-top: 20px;
		display: block;
		height: 50px;
		line-height: 50px;
		border: 1px solid #EEE;
		border-bottom: none;
		color: #5c6781;
		font-weight: bold;
		padding-left: 20px;
	}
	.at-table__body-wrapper {
		overflow: hidden;
	}

	#allDateSynclog .inner {
		background-color: white;
		padding: 0px 20px 0px 20px;
	}
  #allDateSynclog .inner:last-of-type {
    padding-bottom: 20px;
  }
	#allDateSyncLog .bottomLine {
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #EEE;
		background-color: white;
	}

	#allDateSyncLog .bottomLine>span {
		color: #5c6871;
		font-size: 14px;
		font-weight: bold;
	}
  #allDateSynclog .doubleNum {
	  width: 25px;
	  margin-top: 4px;
	  border-radius: 8.5px;
  }
  #allDateSynclog .singleNum {
    width: 17px;
    border-radius: 50%;
    position: relative;
  }
  #allDateSynclog .more {
    width: 32px;
    border-radius: 8.5px;
  }
  #allDateSynclog .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
  }
  #allDateSynclog .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84) ;
    *font-size:10px;
  }
</style>
<script>
	import { mapState } from 'vuex'
	import $http from '../../../../utils/http.js'
	export default {
	  name: 'userSynchro',
	  data () {
	    return {
	      suredeleteone: false
	    }
	  },
	  computed: {
	    ...mapState({
	      add: state => state.users.syncDate.addtable, // 列表数据
	      update: state => state.users.syncDate.uptable, // 列表数据
	      deletes: state => state.users.syncDate.deltable, // 列表数据
	      filters: state => state.group.optionName // 筛选列表
	    })
	  },
	  methods: {
	    deletemsgone () {
	      this.$store.dispatch('user/delSync')
	      // this.getMessage()
	      this.suredeleteone = false
	    },
	    cancel () {
	      this.suredeleteone = false
	    },
	    toPath () {
	      this.$router.push('synclog')
	    },
	    clear () {
	      this.suredeleteone = true
	    },
	    addFilter (value) {
	      this.setFilter('add', value['user_name'])
	    },
	    upFilter (value) {
	      this.setFilter('update', value['user_name'])
	    },
	    delFilter (value) {
	      this.setFilter('del', value['user_name'])
	    },
	    setFilter (type, value) {
	      if (value.length > 0) {
	        let form = { 'user_group_id': JSON.stringify(value) }
	        var _this = this
	        $http.post('api/group/id', form).then(function (response) {
	          if (response.status === 'success') {
	            if (response.msg.length > 0) {
	              let personId = []
	              for (var i = 0; i < response.msg.length; i++) {
	                personId.push(response.msg[i].person_id)
	              }
	              _this.$store.commit('user/syncFilters', personId)
	              _this.$store.dispatch('user/getSyncmessage', { 'type': type })
	            } else {
	              _this.$store.commit('user/syncFilters', ['asd'])
	              _this.$store.dispatch('user/getSyncmessage', { 'type': type })
	            }
	          }
	        }
	        ).catch(function (error) {
	          console.log(error)
	        })
	      } else {
	        this.$store.commit('user/syncFilters', [])
	        this.$store.dispatch('user/getSyncmessage', { 'type': type })
	      }
	    },
	    sortChange ({ column, prop, order }) {
	      if (prop) {
	        var data = {
	          'prop': prop,
	          'order': order.substring(0, order.length - 3)
	        }
	        this.$store.commit('user/syncOrder', data)
	        if (column.columnKey === 'add') {
	          this.$store.dispatch('user/getSyncmessage', { 'type': 'add' })
	        } else if (column.columnKey === 'update') {
	          this.$store.dispatch('user/getSyncmessage', { 'type': 'update' })
	        } else {
	          this.$store.dispatch('user/getSyncmessage', { 'type': 'delete' })
	        }
	      }
	    },
	    getMessage () {
      // 获取所有用户组名称
	      this.$store.dispatch('group/getOptions', 1)
	      this.$store.dispatch('user/getSyncmessage', { 'type': 'add' })
	      this.$store.dispatch('user/getSyncmessage', { 'type': 'update' })
	      this.$store.dispatch('user/getSyncmessage', { 'type': 'delete' })
	    }
	  },
	  mounted () {
	    this.getMessage()
	  }
	}
</script>